<template>
  <div class="sort">
    <div class="title">
      <el-button size="small" type="primary" :loading="loading" @click="handleSave">保存</el-button>
    </div>
    <div class="list-box">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        height="calc(100vh - 150px)"
        class="table">
        <el-table-column
          type="index"
          width="60"
          align="center"
          label="序号">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="mdName"
          label="字段名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="mdCode"
          label="字段code">
        </el-table-column>
        <el-table-column
          prop="isEnable"
          label="是否开启">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnable"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNo"
          width="180"
          label="顺序">
          <template slot-scope="scope">
            <avue-input-number
              v-model="scope.row.orderNo"
              size="small"
              :precision="0"
              :disabled="!scope.row.isEnable"
              controls-position
              :min-rows="1"
              :max-rows="1000"></avue-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  editArchivesSet,
  getAllTable,
  searchArchivesSet
} from '../../../../../../../api/electronicsFile/electronicsFile'
import { mapActions } from 'vuex'

export default {
  name: 'retrievalSetAppraisal', // 检索设置
  props: {
    idTable: {
      type: String
    }
  },
  data () {
    return {
      loading: false,
      tableLoading: true,
      page: {
        pageNo: 1,
        pageSize: 1000,
        params: [{
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      },
      tableData: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    ...mapActions('electronicsFile/getSearch', ['getSearchOptions']),
    getList () {
      getAllTable(this.idTable, '3').then(ress => {
        this.tableData = []
        ress.data.data.map(item => {
          this.tableData.push({
            mdCode: item.mdCode,
            mdName: item.mdName,
            isEnable: false,
            orderNo: 1,
            width: 80
          })
        })
        searchArchivesSet(this.page).then(res => {
          this.tableData.map(items => {
            res.data.data.list.map(item => {
              if (items.mdCode === item.mdCode) {
                items.isEnable = item.isEnable
                items.orderNo = Number(item.orderNo)
              }
            })
          })
          this.tableLoading = false
        })
      })

      searchArchivesSet(this.page).then(res => {
        if (res.data.data.list.length < 1) {

        } else {
          this.tableData = res.data.data.list
          this.tableLoading = false
        }
      })
    },
    handleSave () {
      this.loading = true
      editArchivesSet(this.idTable, this.tableData).then(() => {
        this.$message.success('设置成功！')
        this.getList()
        this.loading = false
        this.getSearchOptions(this.idTable)
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .sort{
    .title {
      text-align: right;
      padding: 10px 20px;
    }

  }
</style>
